<template>
  <div>
    <el-container>
      <el-header>
        <el-select
          @change="getPermissionData"
          v-model="tableData.permissionType"
          placeholder="授权码类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-input
          @change="getPermissionData"
          keyup.enter.native
          v-model="tableData.phone"
          placeholder="请输入要查询的电话号码"
          style="width:15%"
        ></el-input>

        <el-input
          @change="getPermissionData"
          keyup.enter.native
          v-model="tableData.company"
          placeholder="请输入要查询的单位名称"
          style="width:20%"
        ></el-input>
        <!-- 导出Excel -->
        <el-button type="primary" @click="exportToExcel">导出Excel</el-button>
      </el-header>

      <el-main>
        <el-table
          v-loading="tableLoding"
          :data="tableData.data"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  style="margin-right:2%"
                  size="medium"
                  @click="showEditDialog(props.row.id)"
                  circle
                ></el-button>
                <el-form-item label="单位名称:">
                  <span>{{ props.row.permissionCompany.company }}</span>
                </el-form-item>
                <el-form-item label="使用者电话:">
                  <span>{{ props.row.permissionCompany.phone }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="100"></el-table-column>
          <el-table-column
            prop="permissionType"
            label="授权码类型"
            :formatter="permissionTypeChangeData"
            sortable
          ></el-table-column>
          <el-table-column prop="permissionCode" label="授权码"></el-table-column>
          <el-table-column prop="permissionCompany.applyTime" label="发放时间"></el-table-column>
          <el-table-column prop="permissionCompany.putUserName" label="发放人"></el-table-column>
          <el-table-column prop="permissionUname" label="授权账号"></el-table-column>
          <el-table-column prop="permissionEffective" label="授权有效期(天)/次数(次)"></el-table-column>
          <el-table-column prop="permissionActivationTime" label="授权时间" sortable></el-table-column>
          <el-table-column prop="emid" label="激活设备" sortable></el-table-column>
        </el-table>
      </el-main>

      <el-footer>
        <div class="block">
          <el-pagination
            @size-change="changePageSize"
            @current-change="changeCurrentPage"
            @prev-click="prevPage"
            @next-click="nextPage"
            :current-page="tableData.currentPage"
            :page-sizes="[5, 10, 15, 20,25,30,35,40]"
            :page-size="tableData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
          ></el-pagination>
        </div>
      </el-footer>
    </el-container>
    <!-- 修改单位名称的对话框 -->
    <el-dialog
      title="修改"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
      :close-on-click-modal="false"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="70px">
        <el-form-item label="单位名称">
          <el-input v-model="editForm.company"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editForm.phone" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPermissionData,
  getPermissionById,
  editInfo,
  exportToExcel
} from "@/api/permissionApi";

export default {
  data() {
    return {
      editData: {},
      editForm: {},
      editDialogVisible: false, //是否显示对话框
      tableData: {
        //表格data
        data: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        grantState: 1,
        permissionType: null,
        phone: "",
        company: ""
      },
      tableLoding: false, //表格加载
      options: [
        {
          value: null,
          label: "全部"
        },
        {
          value: 1,
          label: "时间授权码"
        },
        {
          value: 2,
          label: "次数授权码"
        },
        {
          value: 3,
          label: "永久授权码"
        }
      ]
    };
  },
  created: function() {
    this.getPermissionData();
  },
  methods: {
    exportToExcel() {
      const param = {
        page: {
          currentPage: this.tableData.currentPage,
          pageSize: this.tableData.pageSize
        },
        permission: {
          grantState: this.tableData.grantState,
          permissionType: this.tableData.permissionType,
          phone: this.tableData.phone,
          company: this.tableData.company,
          applyState: 0
        }
      };
      exportToExcel(param)
        .then(response => {
          this.$message({
            showClose: true,
            message: "导出成功!文件在C:\\permissionInfo.xls",
            type: "success",
            duration:5000
          });
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "文件导出失败!",
            type: "error"
          });
        });
      this.getPermissionData();
    },
    // 展示编辑信息的对话框
    async showEditDialog(id) {
      getPermissionById(id)
        .then(response => {
          this.editForm = response.data.data.data;
          this.tableLoding = false;
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: error,
            type: "error"
          });
          this.tableLoding = false;
        });
      this.editDialogVisible = true;
    },
    // 修改信息
    editInfo() {
      (this.editData.id = this.editForm.id),
        (this.editData.company = this.editForm.company),
        editInfo(this.editData)
          .then(response => {
            this.$message({
              message: "修改成功！",
              type: "success"
            });
            this.tableLoding = false;
            this.editDialogVisible = false;
            this.getPermissionData();
          })
          .catch(error => {
            this.$message({
              message: "修改失败",
              type: "error"
            });
            this.tableLoding = true;
          });
    },
    // 监听修改信息对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();

      this.editDialogVisible = false;
    },
    //数据控制
    getPermissionData() {
      this.tableLoding = true;
      const param = {
        page: {
          currentPage: this.tableData.currentPage,
          pageSize: this.tableData.pageSize
        },
        permission: {
          grantState: this.tableData.grantState,
          permissionType: this.tableData.permissionType,
          phone: this.tableData.phone,
          company: this.tableData.company,
          applyState: 0
        }
      };
      getPermissionData(param)
        .then(response => {
          this.tableData.data = response.data.data.items;
          this.tableData.total = response.data.data.total;
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: error,
            type: "error"
          });
        });
      this.tableLoding = false;
    },
    changePageSize(val) {
      this.tableData.pageSize = val;
      this.getPermissionData();
    },
    changeCurrentPage(val) {
      this.tableData.currentPage = val;
      this.getPermissionData();
    },
    prevPage(val) {
      this.tableData.currentPage = val;
      this.getPermissionData();
    },
    nextPage(val) {
      this.tableData.currentPage = val;
      this.getPermissionData();
    },
    permissionTypeChangeData: function(row, column) {
      return row.permissionType == "1"
        ? "时间授权码"
        : row.permissionType == "2"
        ? "次数授权码"
        : row.permissionType == "3"
        ? "永久授权码"
        : "未知";
    },
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    handleSelectionChange(val) {
      console.log(val);
    }
  }
};
</script>

<style>
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #70b3ff87 !important;
}
</style>